<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>logo.png">
    <title>落迁忆の博客</title>
    <style>
        canvas{
            position: fixed;
            z-index: 999;
            touch-action: none;
            pointer-events: none
        }
    </style>
    <style>
        html,
        body,
        #app {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        .chromeframe {
            margin: 0.2em 0;
            background: #ccc;
            color: #000;
            padding: 0.2em 0;
        }

        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999999;
        }

        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            /* COLOR 1 */
            border-top-color: #FFF;
            -webkit-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -moz-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 2s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
            z-index: 1001;
        }

        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            /* COLOR 2 */
            border-top-color: #FFF;
            -webkit-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -moz-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 3s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            /* COLOR 3 */
            -moz-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -webkit-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 1.5s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }


        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);
                /* IE 9 */
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);
                /* IE 9 */
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */
            }
        }


        #loader-wrapper .loader-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: rgb(63,81,181);
            /* Old browsers */
            z-index: 1000;
            -webkit-transform: translateX(0);
            /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(0);
            /* IE 9 */
            transform: translateX(0);
            /* Firefox 16+, IE 10+, Opera */
        }

        #loader-wrapper .loader-section.section-left {
            left: 0;
        }

        #loader-wrapper .loader-section.section-right {
            right: 0;
        }

        /* Loaded */

        .loaded #loader-wrapper .loader-section.section-left {
            -webkit-transform: translateX(-100%);
            /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);
            /* IE 9 */
            transform: translateX(-100%);
            /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader-wrapper .loader-section.section-right {
            -webkit-transform: translateX(100%);
            /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);
            /* IE 9 */
            transform: translateX(100%);
            /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }

        .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);
            /* IE 9 */
            transform: translateY(-100%);
            /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.3s 1s ease-out;
            transition: all 0.3s 1s ease-out;
        }

        /* JavaScript Turned Off */

        .no-js #loader-wrapper {
            display: none;
        }

        .no-js h1 {
            color: #222222;
        }

        #loader-wrapper .load_title {
            font-family: 'Open Sans';
            color: #FFF;
            font-size: 19px;
            width: 100%;
            text-align: center;
            z-index: 9999999999999;
            position: absolute;
            top: 60%;
            opacity: 1;
            line-height: 30px;
        }

        #loader-wrapper .load_title span {
            font-weight: normal;
            font-style: italic;
            font-size: 13px;
            color: #FFF;
            opacity: 0.5;
        }
    </style>
    <!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
</head>
<body>
<canvas></canvas>
<div id="app">
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
        <div class="load_title">正在进入 落迁忆の博客,请耐心等待
            <br>
            <span>by 落迁忆</span>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/quietflow.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="/js/prism.js"></script>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js"></script>
<script src="https://cdn.bootcss.com/node-waves/0.7.6/waves.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>

<script type="text/javascript">
    titleArray = [];function scrollTitle() {if (titleArray.length == 0) return;titleArray.push(titleArray[0]);titleArray.shift();document.title = titleArray.join('');}setInterval(scrollTitle, 500);(function() {var OriginTitile = document.title,titleTime;document.addEventListener('visibilitychange', function() {if (document.hidden) {titleArray = '别走~快回来ε=ε=ε=(~￣▽￣)~'.split('');clearTimeout(titleTime);} else {document.title = '';titleArray = '(｡･∀･)ﾉﾞ嗨,欢迎回来~'.split('');titleTime = setTimeout(function() {document.title = OriginTitile;titleArray = [];}, 2000);}});})();
    document.querySelector('#subtitle').innerText=document.querySelector('#jinrishici-sentence').innerText
</script>
<script>
    var canvas = document.querySelector('canvas');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    c = canvas.getContext('2d');

    window.addEventListener('resize', function () {
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        initCanvas();
    });

    var mouse = {
        x: undefined,
        y: undefined
    };

    window.addEventListener('mousemove',
        function (event) {
            mouse.x = event.x;
            mouse.y = event.y;
            drawCircles();
        });

    window.addEventListener("touchmove",
        function (event) {
            let touch = event.touches[0];
            mouse.x = touch.clientX;
            mouse.y = touch.clientY;
            drawCircles();
        });


    function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.minRadius = radius;
        this.vx = vx;
        this.vy = vy;
        this.birth = birth;
        this.life = life;
        this.opacity = opacity;

        this.draw = function () {
            c.beginPath();
            c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
            c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
            c.fill();
        };

        this.update = function () {
            if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
                this.vx = -this.vx;
            }

            if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
                this.vy = -this.vy;
            }

            this.x += this.vx;
            this.y += this.vy;

            this.opacity = 1 - (frame - this.birth) * 2 / this.life;

            if (frame > this.birth + this.life) {
                for (let i = 0; i < circleArray.length; i++) {
                    if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
                        circleArray.splice(i, 1);
                        break;
                    }
                }
            } else {
                this.draw();
            }
        };

    }

    var circleArray = [];

    function initCanvas() {
        circleArray = [];
    }

    var colorArray = [
        '246,246,246',
        '255,64,129',
        '63,81,181'];


    function drawCircles() {
        for (let i = 0; i < 6; i++) {
            let radius = Math.floor(Math.random()) + 2;
            let vx = Math.random() * 3 - 1;
            let vy = Math.random() * 3 - 1;
            let spawnFrame = frame;
            let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
            let life = 100;
            circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));

        }
    }

    var frame = 0;

    function animate() {
        requestAnimationFrame(animate);
        frame += 1;
        c.clearRect(0, 0, innerWidth, innerHeight);
        for (let i = 0; i < circleArray.length; i++) {
            circleArray[i].update();
        }

    }

    initCanvas();
    animate();

    // This is just for demo purposes :
    for (let i = 1; i < 100; i++) {
        (function (index) {
            setTimeout(function () {
                mouse.x = 80 + i * 20;
                mouse.y = 100;
                drawCircles();
            }, i * 10);
        })(i);
    }
</script>
<script type="text/javascript">
    $(function (){
        $(function () {
            var BLOG = { ROOT: '/', SHARE: true, REWARD: true };
            // var servlet_url = 'localhost:8081/js/'
            var base_url = '/js/';
            var local_scripts = [
                "jquery.min.js",
                "test.js",
                "search.min.js",
                "leancloud-counter.min.js",
                "vconsole.min.js",
                "ribbon.min.js",
                "instantclick.min.js"
            ]
            for (let var1 in local_scripts) {
                const s = document.createElement('script');
                s.src = base_url+local_scripts[var1];
                document.body.appendChild(s);
            }
        });
        $("body").quietflow({
            theme : "bouncingBalls",
            specificColors : [
                "rgba(46, 204, 113, .5)",
                "rgba(52, 152, 219, .5)",
                "rgba(231, 76, 60, .5)",
                "rgba(155, 89, 182, .5)",
                "rgba(241, 196, 15, .5)"
            ],
            bounceBallCount : 25,
            bounceSpeed: 150,
            backgroundCol : "white"
        })
    })
</script>
<script type="text/javascript">

    var div = document.createElement('div');
    var loop = setInterval(function () {
        console.log(div);
        console.clear();
    }, 200);

    Object.defineProperty(div, "id", {
        get: function () {
            clearInterval(loop);
            //alert("禁止非法调试！请关闭开发者工具！");
            //location.href = "/WebPages/Home/AttackError";
            alert("禁止非法调试！请关闭开发者工具！")
            setInterval(breakDebugger, 100);//防止其他外部调试
        }
    });

    function checkDebugger() {
        var d = new Date();
        debugger;
        var dur = Date.now() - d;
        if (dur < 5) {
            return false;
        } else {
            //location.href = "/WebPages/Home/AttackError";
            alert("禁止非法调试！请关闭开发者工具！")
            return true;
        }
    }
    function breakDebugger() { if (checkDebugger()) { breakDebugger(); } }

    //其他扩展：

    //禁止右键
    $(document).bind("contextmenu", function () { return false; });

    //屏蔽f12, ctrl
    //$(document).bind("keydown ", function (e) {
    //    if (e.keyCode === 123 || e.keyCode === 17) { //屏蔽F12 ctrl
    //        e.preventDefault();
    //        return false;
    //    }
    //    return true;
    //});


    var preventCtrl = function (e) {

        if (e.keyCode === 123) { //屏蔽F12
            e.preventDefault();
            return false;
        } else if (e.keyCode === 17) { //ctrl
            console.log("prevent keycode s");
            document.onkeydown = preventS;
            return false;
        }
        return true;
    }

    var preventS = function (e) {
        if (e.keyCode === 123 || e.keyCode === 83) { //屏蔽F12 ctrl
            e.preventDefault();
            return false;
        }
        return true;
    }

    var nopreventS = function (e) {
        if (e.keyCode === 17) {
            console.log("no prevent keycode s");
            document.onkeydown = preventCtrl;
        }

    }

    //屏蔽f12, ctrl
    document.onkeydown = preventCtrl;
    document.onkeyup = nopreventS;

    //禁止复制
    //$(document).bind("selectstart", function (e) { e.preventDefault(); });

</script>
</body>
</html>
